<!-- 客户分析 -->

<template>
  <div class="box">
    <div class="topBar">
      <div class="topBox">
        <el-form :inline="true" :model="bondInfoForm">
          <el-form-item label="统计维度：">
            <el-select v-model="value" placeholder="请选择" @change="dimension">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="统计视图：">
            <el-select v-model="values" placeholder="请选择" @change="statistics">
              <el-option v-for="item in views" :key="item.values" :label="item.label" :value="item.values">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据截止日期：">
            <el-date-picker v-model="bondInfoForm.value1" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="业务类型：">
            <el-select v-model="values" placeholder="请选择" @change="statistics">
              <el-option v-for="item in views" :key="item.values" :label="item.label" :value="item.values">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="bondInfoSubmit" class="btn">查询</el-button>
            <el-button type="primary" @click="bondInfoSubmit" class="btn">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- <div class="zj">
            <span class="zjTitle">债券信息</span>
            <span class="zjInput" @click="zjFn">{{ bondInfo.bondFname }}</span>
          </div>
          <div class="searchBtn">
            <el-button type="primary" class="btn" @click="clearFn">重置</el-button>
          </div> -->
      </div>
    </div>
    <div class="right">
      <!-- 表格 -->

      <div class="bondCard"></div>
      <div class="tableBox">
        <div class="tableBoxChild">
          <el-row :gutter="5">
            <!-- <el-col :span="4">
              <div style="border: 1px solid rgba(126, 163, 255, 0.3)">
                <div class="title">{{ titles }}</div>
                <div class="names">
                  <ul v-for="(item, index) in names" :key="index">
                    <li>{{ item.name }}</li>
                  </ul>
                </div>
              </div>
            </el-col> -->
            <el-col :span="24">
              <!-- <div class="tablestile">
                {{ title }}
              </div> -->
              <el-table :data="tableData">
                <el-table-column label="序号" align="center" type="index">
                </el-table-column>
                <el-table-column prop="prop1" label="客户名称" align="center">
                </el-table-column>
                <el-table-column prop="prop2" label="NCD/同业存款投资" align="center">
                </el-table-column>
                <el-table-column prop="prop3" label="同业理财投资" align="center">
                </el-table-column>
                <el-table-column prop="prop4" label="银登ABS投资" align="center">
                </el-table-column>
                <el-table-column prop="prop5" label="货币基金投资" align="center">
                </el-table-column>
                <el-table-column prop="prop6" label="非银机构现金管理类产品投资" align="center">
                </el-table-column>
                <el-table-column prop="prop7" label="同业借款投资" align="center">
                </el-table-column>
                <el-table-column prop="prop8" label="债券基金投资/非银" align="center">
                </el-table-column>
                <el-table-column prop="prop9" label="债券基金投资/交易" align="center">
                </el-table-column>
                <el-table-column prop="prop10" label="专户投资" align="center">
                </el-table-column>
                <el-table-column prop="prop11" label="结构化融资" align="center">
                </el-table-column>
                <el-table-column prop="prop12" label="来访时间" align="center">
                </el-table-column>
                <el-table-column label="保险债权计划投资" align="center" prop="prop13">
                </el-table-column>
                <el-table-column prop="prop14" label="金融机构金融债投资" align="center">
                </el-table-column>
                <el-table-column prop="prop15" label="状态" align="金融机构二级资本债/次级债投资">
                </el-table-column>
                <!-- <el-table-column prop="" label="操作" align="center">
            </el-table-column> -->
              </el-table>
            </el-col>
          </el-row>
        </div>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="pageFn">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getBond } from "@/api/common/index.js";
import {
  queryBondProbabilityDetail,
  newBondInfo,
} from "@/api/recommendationSystem/index.js";
export default {
  data() {
    return {
      tableData: [
        {
          prop1: "中国工商银行股份有限公司",
          prop2: "1.2",
          prop3: "2.3",
          prop4: "1.2",
          prop5: "1.8",
          prop6: "-",
          prop7: "-",
          prop8: "-",
          prop9: "1.2",
          prop10: "1.2",
          prop11: "1.2",
          prop12: "2022-11-11",
          prop13: "-",
          prop14: "1.8",
          prop15: "有效",
        },
        {
          prop1: "中国建设银行股份有限公司",
          prop2: "1.4",
          prop3: "1.8",
          prop4: "1.2",
          prop5: "2.1",
          prop6: "-",
          prop7: "-",
          prop8: "-",
          prop9: "1.4",
          prop10: "1.2",
          prop11: "1.2",
          prop12: "2022-11-11",
          prop13: "-",
          prop14: "2.1",
          prop15: "有效",
        },
        {
          prop1: "宁波银行股份有限公司",
          prop2: "1.1",
          prop3: "1.7",
          prop4: "1.2",
          prop5: "1.7",
          prop6: "-",
          prop7: "-",
          prop8: "-",
          prop9: "1.1",
          prop10: "1.1",
          prop11: "1.1",
          prop12: "2022-11-11",
          prop13: "-",
          prop14: "1.8",
          prop15: "有效",
        },
        {
          prop1: "天弘基金管理有限公司",
          prop2: "1.5",
          prop3: "1.5",
          prop4: "1.2",
          prop5: "1.8",
          prop6: "-",
          prop7: "-",
          prop8: "-",
          prop9: "1.5",
          prop10: "1.1",
          prop11: "1.1",
          prop12: "2022-11-11",
          prop13: "-",
          prop14: "1.8",
          prop15: "有效",
        },
      ],
      titles: "客户",
      title: "交易量业务",
      names: [
        { name: "中国平安保险（集团）公司" },
        { name: "中国平安保险（集团）公司" },
        { name: "中国平安保险（集团）公司" },
        { name: "中国平安保险（集团）公司" },
        { name: "中国平安保险（集团）公司" },
        { name: "中国平安保险（集团）公司" },
        { name: "中国平安保险（集团）公司" },
        { name: "中国平安保险（集团）公司" },
        { name: "中国平安保险（集团）公司" },
        { name: "中国平安保险（集团）公司" },
        { name: "中国平安保险（集团）公司" },
        { name: "中国平安保险（集团）公司" },
        { name: "中国平安保险（集团）公司" },
        { name: "中国平安保险（集团）公司" },
        { name: "中国平安保险（集团）公司" },
        { name: "中国平安保险（集团）公司" },
        { name: "中国平安保险（集团）公司" },
        { name: "中国平安保险（集团）公司" },
        { name: "中国平安保险（集团）公司" },
      ],
      options: [
        {
          value: "选项1",
          label: "交易量",
        },
        {
          value: "选项2",
          label: "日量",
        },
        {
          value: "选项3",
          label: "日均",
        },
      ],
      value: "",
      views: [
        {
          values: "选项1",
          label: "客户",
        },
        {
          values: "选项2",
          label: "区域",
        },
        {
          values: "选项3",
          label: "等级",
        },
        {
          values: "选项4",
          label: "类型",
        },
      ],
      values: "",

      dialogVisible: false,
      drawer: false,
      searchList: [],
      // tableData: [],
      searchInput: "",
      bondInfo: {},
      total: 0,
      count: "",
      page: 1,
      bondTotal: 0,
      bondInfoForm: {
        bondSname: "",
        bondId: "",
        value1: "",
      },
    };
  },
  filters: {
    filterNum(value) {
      const str = value ? value.toString() : "";
      if (str) {
        const reg =
          str.indexOf(".") > -1 ? /\B(?=(\d{3})+\.)/g : /\B(?=(\d{3})+$)/g;
        const returnData = str.replace(reg, ",");
        return returnData;
      } else {
        return "";
      }
    },
  },
  mounted() { },
  methods: {
    // 维度
    dimension(val) {
      console.log(val);
      if (val == "选项1") {
        this.title = "交易量业务";
      } else if (val == "选项2") {
        this.title = "日量业务";
      } else if (val == "选项3") {
        this.title = "日均业务";
      }
    },
    statistics(val) {
      console.log(val);
      if (val == "选项1") {
        this.titles = "客户";
      } else if (val == "选项2") {
        this.titles = "区域";
      } else if (val == "选项3") {
        this.titles = "等级";
      } else if (val == "选项4") {
        this.titles = "类型";
      }
    },
    // 文件上传
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //   新增弹框
    onSubmit() {
      console.log("submit!");
    },
    //
    clearFn() {
      this.bondInfo = {};
    },
    bondInfoSubmit() {
      const param = {
        ...this.bondInfoForm,
        pn: 10,
        page: 1,
      };
      console.log("newBondInfo param", param);
      this.newBondInfo(param);
    },
    glFn(row) {
      return row.assessRate;
      // return Number(Number(row.assessRate) * 100).toFixed(2) + "%"
    },
    zjFn() {
      this.drawer = true;
      const param = {
        bondName: "",
        bondId: "",
        pn: 10,
        page: 1,
      };
      this.newBondInfo(param);
    },
    bondRowClick(row) {
      this.drawer = false;
      const param = {
        bondName: row.bondName,
        bondId: row.bondId,
        pn: 10,
        page: 1,
      };
      getBond(param).then((res) => {
        this.bondInfo = res.data.result[0];
      });
      queryBondProbabilityDetail({
        bondId: row.bondId,
        page: 1,
        pn: 10,
      }).then((res) => {
        console.log(res, "resres");
        this.tableData = res.data.result;
        this.total = Number(res.data.totalResults);
      });
    },
    bondPageFn(page) {
      const param = {
        bondName: "",
        bondId: "",
        pn: 10,
        page: page,
      };
      this.newBondInfo(param);
    },
    pageFn(currentPage) {
      console.log("pageFn", currentPage);
      queryBondProbabilityDetail({
        bondId: this.bondInfo.bondId,
        page: currentPage,
        pn: 10,
      }).then((res) => {
        this.tableData = res.data.result;
        this.total = Number(res.data.totalResults);
      });
    },
    newBondInfo(param) {
      const _this = this;
      newBondInfo(param).then((res) => {
        _this.searchList = res.data.result;
        _this.bondTotal = Number(res.data.totalResults);
        console.log(res, "resres");
      });
    },
    clickFn(v, i) {
      this.clearFn();
      this.count = i;
      this.bondInfo = {
        ...v,
      };
      queryBondProbabilityDetail({
        bondId: v.bondId,
        page: this.page,
        pn: 10,
      }).then((res) => {
        console.log(res, "resres");
        this.tableData = res.data.result;
        this.total = Number(res.data.totalResults);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.tablestile {
  border: 1px solid rgba(126, 163, 255, 0.3);
  height: 50px;
  line-height: 50px;
  border-bottom: none;
  text-align: center;
  color: #fff;
}

.title {
  font-size: 18px;
  color: #fff;
  text-align: center;
  border-bottom: 1px solid rgba(126, 163, 255, 0.3);
}

.names {
  ul {
    text-align: center;
    list-style: none;
    color: #fff;
    font-size: 16px;
    line-height: 30px;
  }
}

.el-table ::v-deep th.el-table__cell {
  background-color: #1c2238 !important;
  color: #fff;
}

.pop .el-form ::v-deep .el-form-item .el-form-item__content .el-input__inner {
  width: 100%;
}

.pop .el-form ::v-deep .el-form-item .el-form-item__content .el-textarea__inner {
  border: 1px solid rgba(126, 163, 255, 0.3);
  color: #ffffff;
  background-color: #363657;
}

.pop ::v-deep .el-button--primary {
  border: 1px solid rgba(126, 163, 255, 0.3);
  color: #ffffff;
  background-color: #363657;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #363657;
  background: rgba(31, 155, 253, 0.2);
  color: #fff;
}

::v-deep .el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li {
  background-color: #363657;
}

::v-deep .el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: #363657;
}

.box {
  .topBar {
    min-height: 80px;
    background-color: #262d47;
    margin-bottom: 10px;
    padding: 20px 20px;
    padding-bottom: 10px;
  }

  .topBox {
    display: flex;

    span {
      display: inline-block;
    }

    .searchBtn {
      margin-left: 20px;
    }

    .zj {
      margin-left: 20px;
    }

    .khTitle {
      height: 30px;
      line-height: 30px;
      vertical-align: top;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700px;
      margin-right: 10px;
    }

    .khInput,
    .zjInput {
      height: 30px;
      line-height: 30px;
      width: 200px;
      overflow: hidden;
      border: 1px solid rgba(126, 163, 255, 0.3);
      color: #ffffff;
      background-color: #363657;
      border-radius: 3px;
      cursor: pointer;
      text-align: center;
      line-height: 30px;
      padding: 0px 10px;
      font-size: 12px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .zjTitle {
      height: 30px;
      line-height: 30px;
      vertical-align: top;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700px;
      margin-right: 10px;
    }
  }

  .left {
    width: 240px;
    background-color: #262d47;
    height: 100%;
  }

  .right {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .searchList {
    padding-top: 10px;
    height: 700px;
    overflow: scroll;
    padding-left: 10px;

    .searchListItem {
      height: 35px;
      line-height: 35px;
      text-align: center;
      color: #959fc5;
      font-size: 12px;
      overflow: hidden; //超出隐藏
      white-space: nowrap; //不折行
      text-overflow: ellipsis; //溢出显示省略号
    }

    .searchListItem:hover {
      background: #1f9bfd !important;
      color: #fff;
      cursor: pointer;
    }
  }

  .searchListItemAct {
    background: #1f9bfd !important;
    color: #fff !important;
  }

  .bondCard {
    background-color: #262d47;
    color: #ffffff;
    margin-bottom: 10px;

    .info {
      display: flex;
      padding: 20px 20px;
    }

    .infoItem {
      width: 300px;
    }

    .infoItemVal {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #d6dcff;
    }

    .infoItemLabel {
      margin-right: 30px;
      font-size: 14px;
    }
  }

  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }

  .tableBox {
    background-color: #262d47;
    flex: 1;
    padding: 15px 10px;
  }

  .tableBoxChild {
    min-height: 800px;
  }

  .el-pagination {
    text-align: right;
  }

  .leftTitle {
    height: 40px;
    line-height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding-left: 17px;
    margin-bottom: 10px;
  }

  .bondCardTitle {
    height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding: 10px 16px;
  }
}
</style>
